<template>
  <div>
    <el-card v-if="cardShow">
      <el-row type="flex" justify="end">
        <el-button type="primary" plain @click="cardShow=false">新增试题</el-button>
      </el-row>
      <br />
      <br />
      <!-- 表单区域 -->
      <el-form ref="form" :model="formData" label-width="80px" :inline="true">
        <!-- 学科名称 -->
        <el-form-item label="学科名称">
          <el-select v-model="formData.subject_id" placeholder="请选择学科" @focus="getSubjectTree">
            <el-option
              v-for="item in subjectList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <!-- 目录名称 -->
        <el-form-item label="目录名称">
          <el-select v-model="formData.directory_id" placeholder="请选择目录" @focus="getdirectoryList">
            <el-option v-for="item in menuList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <!-- 标签名称 -->
        <el-form-item label="标签名称">
          <el-select v-model="formData.tag_id" placeholder="请选择标签名称" @focus="getTagList">
            <el-option v-for="item in tagList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <!-- 试题类型 -->
        <el-form-item label="试题类型">
          <el-select v-model="formData.quest_type" placeholder="请选择题型">
            <el-option label="单选题" value="1"></el-option>
            <el-option label="多选题" value="2"></el-option>
            <el-option label="判断题" value="3"></el-option>
            <el-option label="简答题" value="4"></el-option>
          </el-select>
        </el-form-item>
        <!-- 审核状态 -->
        <el-form-item label="审核状态">
          <el-select v-model="formData.check_state" placeholder="请选择审核状态">
            <el-option label="待审核" value="1"></el-option>
            <el-option label="审核通过" value="2"></el-option>
            <el-option label="不通过" value="3"></el-option>
          </el-select>
        </el-form-item>
        <!-- 发布状态 -->
        <el-form-item label="发布状态">
          <el-select v-model="formData.show_state" placeholder="请选择发布状态">
            <el-option label="上架" value="1"></el-option>
            <el-option label="下架" value="2"></el-option>
          </el-select>
        </el-form-item>
        <!-- 创建者 -->
        <el-form-item label="创建者">
          <el-input placeholder="请输入创建者"></el-input>
        </el-form-item>
        <!-- 试题难度 -->
        <el-form-item label="试题难度">
          <el-select v-model="formData.difficulty" placeholder="请选择难度">
            <el-option label="简单" value="1"></el-option>
            <el-option label="中等" value="2"></el-option>
            <el-option label="较难" value="3"></el-option>
          </el-select>
        </el-form-item>
        <!-- 是否真题 -->
        <el-form-item label="是否真题">
          <el-select v-model="formData.is_true_question" placeholder="请选择是否真题">
            <el-option label="是" value="1"></el-option>
            <el-option label="否" value="2"></el-option>
          </el-select>
        </el-form-item>
        <!-- 创建时间 -->
        <el-form-item label="创建时间">
          <el-date-picker
            v-model="formData.create_time"
            prefix-icon="el-icon-date"
            type="daterange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="timestamp"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" icon="el-icon-search" @click="initData">搜索</el-button>
          <el-button size="small" icon="el-icon-refresh" @click="resetFn">重置</el-button>
          <el-button
            size="small"
            :icon="changeInfo===false?'el-icon-folder-remove':'el-icon-folder-add'"
            type="warning"
            @click="changeInfo = !changeInfo"
          ></el-button>
        </el-form-item>
      </el-form>
      <el-row v-if="totallength.length>0">
        <el-button type="success" @click="isShowList(1)">批量上架</el-button>
        <el-button type="warning" @click="isShowList(2)">批量下架</el-button>
        <el-button type="primary" @click="agreelist">批量通过</el-button>
      </el-row>
      <!-- 表格区域 -->
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        border
        @selection-change="selectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="试题信息">
          <template slot-scope="{row}">
            <!-- {{row}} -->
            <el-row type="flex" justify="space-between">
              <el-col>ID: {{row.id}}</el-col>
              <el-col>
                题干信息:
                <el-link style="color:#409eff" @click="questionInfo(row)">
                  <p v-html="row.question"></p>
                </el-link>
              </el-col>
            </el-row>
            <el-row type="flex" justify="space-between">
              <el-col v-if="changeInfo">试题编号: {{row.quest_num}}</el-col>
              <el-col
                v-if="changeInfo"
              >试题类型: {{row.quest_type===1?'单选题':row.quest_type===2?'多选题':row.quest_type===3?'判断题':'简答题'}}</el-col>
              <el-col>归属学科: {{row.subject_name}}</el-col>
              <el-col>归属目录: {{row.directory_name}}</el-col>
            </el-row>
            <el-row type="flex" justify="space-between">
              <el-col>
                <div>
                  标签信息:
                  <span
                    style="padding-right:10px"
                    v-for="(item,index) in row.tag_info"
                    :key="index"
                  >{{item}}</span>
                </div>
              </el-col>
              <el-col>
                发布状态:
                <el-tag :type="row.show_state==1?'success':'info'">{{row.show_state===1?'上架':'下架'}}</el-tag>
              </el-col>
              <el-col v-if="changeInfo">审核人: 暂无</el-col>
              <el-col v-if="changeInfo">
                审核状态:
                <el-tag
                  :type="row.check_state===1?'warning':row.check_state===2?'success':'danger'"
                >{{row.check_state===1?'待审核':row.check_state===2?'通过':'不通过'}}</el-tag>
              </el-col>
            </el-row>
            <el-row type="flex" justify="space-between">
              <el-col v-if="changeInfo">审核意见: {{row.check_remarks===""?row.check_remarks:'暂无'}}</el-col>
              <el-col v-if="changeInfo">创建人: {{row.create_name}}</el-col>
              <el-col v-if="changeInfo">难度: {{row.difficulty===1?'简单':row.difficulty===2?'中等':'较难'}}</el-col>
              <el-col v-if="changeInfo">发布时间: {{row.created_at| formatDate}}</el-col>
            </el-row>
          </template>
        </el-table-column>
        <el-table-column class="tableStyle" prop="name" label="操作" width="220" align="center">
          <template slot-scope="{row}">
            <!-- {{row}} -->
            <div v-if="row.show_state===2">
              <el-button
                v-if="row.check_state===1"
                size="samll"
                circle
                icon="el-icon-edit"
                class="button"
                @click="check_stateBtn(row.id)"
              >审核</el-button>
              <el-button
                size="samll"
                circle
                icon="el-icon-edit"
                class="button"
                v-if="row.check_state===2"
                @click="isShow(row.id,1)"
              >上架</el-button>
              <el-button
                size="samll"
                circle
                icon="el-icon-edit"
                class="button"
                @click="editHandler(row.id)"
              >修改</el-button>
              <el-button
                size="samll"
                circle
                icon="el-icon-delete"
                class="button"
                @click="delHandler(row.id)"
              >删除</el-button>
            </div>
            <div v-else>
              <el-button
                size="samll"
                circle
                icon="el-icon-edit"
                class="button"
                @click="isShow(row.id,2)"
              >下架</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="formData.page"
        :page-sizes="[5,10,15,20]"
        :page-size="formData.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
      <!-- 弹出层 -->
      <!-- <AddQuestion ref="AddQuestion" /> -->
      <AddInfo ref="addInfo" />
      <!-- 审核弹出框 -->
      <el-dialog title="试题审核" :visible.sync="isCheck_stateShow" @close="cancle">
        <el-form label-width="100px">
          <el-form-item label="审核结果">
            <el-radio v-model="checklist[0].check_state" :label="2">通过</el-radio>
            <el-radio v-model="checklist[0].check_state" :label="3">不通过</el-radio>
          </el-form-item>
          <el-form-item label="审核结果">
            <el-input
              v-model="formData.check_remarks"
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
            />
          </el-form-item>
        </el-form>
        <el-row type="flex" justify="end">
          <el-button size="mini" plain type="primary" @click="isCheck_stateShow=false">取消</el-button>
          <el-button size="mini" type="primary" @click.native="check_stateOkBtn">确认</el-button>
        </el-row>
      </el-dialog>
    </el-card>
    <el-card v-else>
      <AddQuestion ref="addQuestion" @back="cardShow=true" @updatedList="initData" />
    </el-card>
  </div>
</template>

<script>
import AddQuestion from "./component/add-question";
import AddInfo from "./component/add-info";
import {
  GetquestionList,
  ShowquestionrApi,
  getTreeListApi,
  CheckquestionrApi,
  delquestionListApi,
  GetOnquestionList
} from "@/api/exam/question";
export default {
  name: "test",
  components: {
    AddInfo,
    AddQuestion
  },
  props: {},
  name: "Question",
  data() {
    return {
      isCheck_stateShow: false,
      changeInfo: true,
      treeList: [], //树数组
      totallength: [], //勾选的数组数量
      tableData: [], //表格列表
      subjectList: [], //学科归属列表
      tagList: [], //标签列表
      menuList: [], //目录
      formData: {
        page: 1,
        limit: 10,
        subject_id: "",
        directory_id: "",
        tag_id: "",
        difficulty: "",
        quest_type: "",
        is_true_question: "",
        show_state: "",
        check_state: "",
        create_name: "",
        create_time: ""
      },
      cardShow: true,
      selectionListId: [], //存放数据对象
      arrId: [], //存放id
      checklist: [{ id: "", check_state: 2, check_remarks: "" }], //存放不通过和待审核的id
      total: 0
    };
  },
  computed: {},
  watch: {},
  created() {
    this.initData();
  },
  mounted() {},
  methods: {
    async initData() {
      let { list, total } = await GetquestionList(this.formData);
      this.total = total;
      this.tableData = list;
    },
    async getSubjectTree() {
      this.subjectList = await getTreeListApi(); //学科列表
    },
    // 目录列表
    getdirectoryList() {
      const arr = this.subjectList.filter(
        item => item.id === this.formData.subject_id
      );
      if (arr.length === 0) {
        this.menuList = [];
      } else {
        console.log(arr);
        this.menuList = arr[0].children; //目录列表
      }
    },
    // 标签列表
    getTagList() {
      const arr = this.menuList.filter(
        item => item.id === this.formData.directory_id
      );
      if (arr.length === 0) {
        this.tagList = [];
      } else {
        console.log(arr);
        this.tagList = arr[0].children; //标签列表
      }
    },
    handleSizeChange(val) {
      // console.log(val);//10,4,6
      this.formData.limit = val;
      this.initData();
    },
    handleCurrentChange(val) {
      //点击那一页就显示那一页
      // console.log(val);
      this.formData.page = val;
      this.initData();
    },
    //将考试详情传给组件
    questionInfo(info) {
      // console.log(info);
      this.$refs.addInfo.addInfo = info;
      this.$refs.addInfo.dialogVisible = true;
    },
    check_stateBtn(id) {
      this.checklist[0].id = id;
      this.isCheck_stateShow = true;
    },
    async check_stateOkBtn() {
      await CheckquestionrApi({ checklist: this.checklist });
      this.initData();
      this.isCheck_stateShow = false;
    },

    // 产品上下架
    async isShow(id, state) {
      // console.log(id, state);
      await ShowquestionrApi({
        id: [id],
        show_state: state
      });
      this.initData();
    },
    //手动勾选全选框 得到选择的数组
    selectionChange(val) {
      this.totallength = val;
      this.totallength.forEach(item => {
        this.arrId.push(item.id);
      });
      this.selectionListId = this.totallength.filter(
        item => item.check_state !== 2 //过滤掉不是2的
      );
      console.log(this.selectionListId);
      if (this.selectionListId === []) {
        this.checklist = [];
      } else {
        this.selectionListId.forEach(item => {
          // console.log(item);
          const obj = {};
          obj.id = item.id;
          obj.check_remarks = "通过，暂无问题";
          obj.check_state = 2;

          this.checklist.push(obj);
        });
      }
    },
    //批量上下架
    async isShowList(state) {
      console.log(state);
      try {
        if (state === 1) {
          await this.$confirm(
            `确定批量上架这${this.totallength.length}条数据吗？`
          );
        } else {
          await this.$confirm(
            `确定批量下架这${this.totallength.length}条数据吗？`
          );
        }
        await ShowquestionrApi({
          id: this.arrId,
          show_state: state
        });
        this.initData();
        this.$message.success("操作成功");
      } catch (error) {
        console.log(error);
      }
    },
    //批量通过
    async agreelist() {
      await CheckquestionrApi({
        checklist: this.checklist
      });
      this.$message.success("所有数据都已审核通过");
      this.initData();
    },
    //修改
    editHandler(editId) {
      this.cardShow = false;

      this.$nextTick(async () => {
        let res = await GetOnquestionList(editId);
        let questoptions = JSON.parse(res.quest_options);
        // const arr = questoptions.filter(i => i.is_true !== false);
        // console.log(arr);
        this.$refs.addQuestion.getSubjectTree();
        this.$refs.addQuestion.getdirectoryList();
        this.$refs.addQuestion.formData = {
          ...res,
          tag_id: res.tag_id.split(","),
          quest_options: questoptions
        };
        // this.$refs.addQuestion.getQuest_options(arr, res.quest_answe);
      });
    },
    // 删除
    async delHandler(delId) {
      // console.log(delId);
      await this.$confirm("确认删除吗?");
      await delquestionListApi(delId);
      this.$message.success("删除成功!");
      this.initData();
    },
    // 重置
    resetFn() {
      (this.formData = {}), this.initData();
    },
    cancle() {
      this.isCheck_stateShow = false;
      this.checklist = [{ id: "", check_state: 2, check_remarks: "" }];
    }
  }
};
</script>
<style  scoped>
.cell {
  display: flex;
  justify-content: space-around;
}
.button {
  border: none;
  color: #6ab2ff;
  background: 0 0;
}
/* .el-table .cell {
 span{}
} */
/* b {
  font-weight: normal;
}
span {
  padding-left: 50px;
  font-size: 16px;
} */
</style>